<template>
    <div class="footer">
        <div class="footer_left">
            
            <el-checkbox v-model="isallCheck"/>
            <!-- <input type="checkBox" :checked="isallCheck" @change="changeAll"> -->
            <span class="footerContext">已完成 {{doneLen}} / 全部 {{allTodoLen}}</span>
        </div>
            <el-button class="footer_right" size="mini" type="danger" @click="clearAll">清除数据完成</el-button>
    </div>
</template>
<script>
export default {
    props:['allTodoLen','doneLen','checkAlltodo'],
    computed:{
        // isallCheck(){
        //      if(this.allTodoLen>0) {
        //         return this.allTodoLen == this.doneLen
        //     }else{
        //         return false
        //     }
        // },

        isallCheck:{
            get(){
                if(this.allTodoLen>0) {
                return this.allTodoLen == this.doneLen
            }else{
                return false
            }
           },
           set(val){
             this.checkAlltodo(val)
           }
        }
    },
  
    methods: {
        clearAll() {
            this.$emit('clearAll')
        },
        changeAll(e){
            this.checkAlltodo(e.target.checked)
        }
    },
    data() {
        return {
            allLen:this.allTodoLen,
            unLen:this.doneLen
        }
    }
}
</script>
<style scoped>
    .footer{
        position:absolute;
        bottom: 0;
        line-height: 30px;
        height: 30px;
        width: calc(100% - 20px);
    }
    .footer_left {
        float: left;
    }
    .footer_right {
        float: right;
    }
    .footerContext {
        margin-left: 5px;
    }
</style>